﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>

    <link href="~/layui/css/layui.css" rel="stylesheet" />
    
    <style>
        body {
            margin: 10px;
        }

        .demo-carousel {
            height: 200px;
            line-height: 200px;
            text-align: center;
        }

        .layui-table-tool-self {
            display: none;
        }
    </style>
</head>
<body>

    <table class="layui-hide" id="demo" lay-filter="test"></table>

  <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>

    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
    <script src="~/layui/layui.js"></script>

    <script>
        layui.config({
            version: '1606182314890' //为了更新 js 缓存，可忽略
        });

        layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function () {
            var layer = layui.layer //弹层
                , table = layui.table //表格

            //执行一个 table 实例
            table.render({
                elem: '#demo'
                , height: 420
               , url: '/Approve/ShowProcurementAsynccc' //数据接口
                , title: '物资采购信息'
                , page: true //开启分页
                , toolbar: 'default' //开启头工具栏，此处显示默认图标，可以自定义模板，详见文档
                , limit: 3
                , limits: [3, 6, 9, 12]
                , cols: [[ //表头
                  { type: 'checkbox', fixed: 'left' }//锁定第一列
                , { field: 'id', title: 'ID', width: 50, align: 'center' }
                , { field: 'name', title: '物资名称', width: 90, align: 'center' }
                , { field: 'typeName', title: '类型', width: 80, align: 'center' }
                , { field: 'material', title: '材质', width: 80, align: 'center' }
                , { field: 'specifications', title: '规格', width: 100, align: 'center' }
                , { field: 'origin', title: '产地', width: 150, align: 'center' }
                , { field: 'num', title: '数量', width: 70, align: 'center' }
                , { field: 'deliver', title: '期望交付日期', width: 150, align: 'center' }
                , { field: 'describe', title: '用途描述', width: 150, align: 'center' }
                , { field: 'applicant', title: '申请人', width: 90, align: 'center' }
                , { field: 'remarks', title: '备注', width: 70, align: 'center' }
                , { field: 'state', title: '审批状态', width: 90, align: 'center',
                 templet:function(d){
            if(d.state==1){
                return "已送到"
            }
            if(d.state==2){
                return "运送中"
            }
            if(d.state==3){
                return "等待中"
            }
        }
                 }, { field: 'creationTime', title: '创建日期', templet: "<div>{{layui.util.toDateString(d.createTime*1000, 'yyyy年MM月dd日 HH:mm:ss')}}</div>", width: 150, align: 'center' }
                    , { fixed: 'right', title: "操作", width: 200, align: 'center', toolbar: '#barDemo' }
                ]]
            });

            //监听头工具栏事件
            table.on('toolbar', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id)
                    , data = checkStatus.data; //获取选中的数据
                switch (obj.event) {
                    case 'add':
                        //页面层
                        layer.open({
                            type: 2,
                            title: '添加数据',
                            skin: 'layui-layer-rim', //加上边框
                            area: ['600px', '450px'], //宽高
                            content: '/Approve/PostProcIndex'
                        });
                        break;
                    case 'update':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else if (data.length > 1) {
                            layer.msg('只能同时编辑一个');
                        } else {
                            var id = checkStatus.data[0].id;
                                //页面层
                                layer.open({
                                    type: 2,
                                    title: '修改数据',
                                    skin: 'layui-layer-rim', //加上边框
                                    area: ['600px', '450px'], //宽高
                                    content: '/Dictionary/GetItemViewEdit?id=' + id
                                });
                        }
                        break;
                    case 'delete':
                        if (data.length === 0) {
                            layer.msg('请选择一行');
                        } else {
                            var id= checkStatus.data[0].id;
                            if (confirm('确定删除当前所选中数据吗？')) {
                                $.ajax({
                                    url: "/Dictionary/Delete?id=" + id,
                                    type: "delete",
                                    dataType: "json",
                                    success: function (res) {
                                        if (res <= 0) {
                                            layer.msg('删除失败！');
                                        }
                                        else {
                                            alert('当前数据信息删除成功！');
                                            location.href="/Dictionary/ItemView"
                                        }
                                    }
                                })
                            }
                        }
                        break;
                };
            });

            //监听行工具事件
            table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data//获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
                if (layEvent === 'detail') {
                    var id = data.id;
                    //页面层
                    layer.open({
                        type: 2,
                        title: '查看数据',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['600px', '450px'], //宽高
                        content: '/Approve/GetProcIndex?id=' + id
                    });
                } else if (layEvent === 'delete') {
                    layer.confirm('真的删除行么', function (index) {
                        var id = data.id;
                        if (confirm('确定删除当前所选中数据吗？')) {
                            $.ajax({
                                url: "/Approve/DeleteAsyncc?id="+id,
                                type: "get",
                                dataType: "json",
                                success: function (res) {
                                    if (res <= 0) {
                                        layer.msg('删除失败！');
                                    }
                                    else {
                                        alert('当前数据信息删除成功！');
                                        location.href = "/Approve/ApproveIndex"
                                    }
                                }
                            })
                        }
                    });
                } else if (layEvent === 'edit') {
                    var id = data.id;
                    //页面层
                    layer.open({
                        type: 2,
                        title: '修改数据',
                        skin: 'layui-layer-rim', //加上边框
                        area: ['600px', '450px'], //宽高
                        content: '/Approve/PutProcIndex?id=' + id
                    });
                }
            });
        });
    </script>
</body>
</html>
